<template>
  <view class="order-list">
    <view class="order-tab">
      <up-tabs :list="orderTab" :current="current" lineColor="linear-gradient(90deg, #A4682F 0%, transparent 100%)"
        lineHeight="16rpx" :lineWidth="current== 0 ? '64rpx' : '96rpx'" :activeStyle="{
    color: '#333333', 
    fontWeight: '500',
    fontSize:'32rpx'}" :inactiveStyle="{
     color: '#666666',
     fontWeight: '400',
     fontSize:'28rpx'}" @click="click"></up-tabs>
    </view>
    <view class="order-content">
      <mescroll-uni @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback" :fixed="false">
        <view class="content-nav" v-for="(item,index) in orderList" :key="index" @click="onTransaction(item)">
          <view class="nav-head">
            <view class="head-title">{{item.category.name}}鉴定</view>
            <template v-for="ite,ind in statusList" :key="ind">
              <view v-if="ite.status == item.status" :style="{color: ite.nameColor}">{{ite.statusName}}</view>
            </template>
          </view>
          <view class="nav-main">
            <view class="main-content">
              <image :src="item.category.image" mode="" class="content-img"></image>
              <view class="content-info">
                <view class="info-head">
                  <view class="head-title">{{item.desc}}</view>
                  <view class="head-price">
                    <view style="font-size: 24rpx;">￥</view>{{item.price}}
                  </view>
                </view>
                <view class="info-label">
                  <image :src="item.expert.avatar" mode="" class="label-img"></image>
                  <view class="label-name">{{item.expert.nickname}}</view>
                  <view class="label-time">{{item.create_time}}</view>
                </view>
              </view>
            </view>
            <template v-for="ite,ind in statusList" :key="ind">
              <view class="main-btn" v-if="ite.status == item.status">
                <view class="btn-primary" v-if="ite.status <=0" @click.stop="onPrimary(ite.status,item)">
                  {{ite.btnName[0]}}
                </view>
                <view class="btn-default" @click.stop="onDefault(ite.status,item.id)">
                  {{ite.status >0 ?ite.btnName[0]:ite.btnName[1]}}
                </view>
              </view>
            </template>
          </view>
        </view>
      </mescroll-uni>
    </view>
  </view>
  <payment-order :show="modalShow" v-if="payNumber && taskId" :taskId="taskId" :price="payNumber"
    @showClose="modalShow = false" @release="modalShow = false"></payment-order>
</template>

<script setup>
  import {
    ref,
    nextTick
  } from 'vue'
  import {
    taskList,
    taskCancel,
    taskDelete
  } from '../api.js'
  import {
    onLoad,
    onShow,
    onPageScroll,
    onReachBottom
  } from '@dcloudio/uni-app';
  import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
  const orderList = ref([])
  const current = ref(0)
  const currentIndex = ref()
  const modalShow = ref(false)
  const payNumber = ref(0)
  const taskId = ref()
  const {
    mescrollInit,
    downCallback,
    getMescroll
  } = useMescroll(onPageScroll, onReachBottom)
  const upOption = ref({
    empty: {
      tip: '~ 暂无鉴定内容 ~'
    }
  })
  const orderTab = ref([{
      name: '全部',
      id: null
    },
    {
      name: '鉴定中',
      id: 1
    },
    {
      name: '待付款',
      id: 0
    },
    {
      name: '已完成',
      id: 2
    }, {
      name: '已取消',
      id: -1
    }
  ]);
  const statusList = ref([{
    status: 1,
    statusName: '鉴定中',
    nameColor: '#A4682F',
    btnName: ['取消订单'],
    btnColor: ['']
  }, {
    status: 0,
    statusName: '待付款',
    nameColor: '#F52020',
    btnName: ['继续付款', '取消订单'],
    btnColor: ['']
  }, {
    status: 2,
    statusName: '鉴定完成',
    nameColor: '#03A142',
    btnName: ['查看结果'],
    btnColor: ['']
  }, {
    status: -1,
    statusName: '已取消',
    nameColor: '#999999',
    btnName: ['重新鉴定', '删除订单'],
    btnColor: ['']
  }])
  onLoad((e) => {
    if (e && e.id) {
      current.value = e.id
      if (e.id == 0) {
        currentIndex.value = ''
      } else if (e.id == 1) {
        currentIndex.value = 1
      } else if (e.id == 2) {
        currentIndex.value = 0
      } else if (e.id == 3) {
        currentIndex.value = 2
      } else {
        currentIndex.value = -1
      }
    }
  })
  onShow(() => {
    nextTick(() => {
      downCallback()
    })
  })

  function click(e) {
    current.value = e.index
    currentIndex.value = e.id
    orderList.value = []
    downCallback()
  }

  function onPrimary(status, item) {
    if (status == '0') {
      payNumber.value = item.price
      modalShow.value = true
      taskId.value = item.id
    } else if (status == '-1') {
      uni.navigateTo({
        url: `/pages/index/identifyPage/identifyRelease?id=${item.id}&expertId=${item.expert_id}`
      })
    }
    console.log(item, 1111)
  }

  function onDefault(status, id) {
    if (status == 0 || status == 1) {
      uni.showModal({
        title: "确定取消订单？",
        success(res) {
          if (res.confirm) {
            taskCancelApi(id)
          } else if (res.cancel) {
            return
          }
        }
      })
    } else if (status == 2) {
      uni.navigateTo({
        url: `/pages/index/identifyPage/identifyResult?id=${id}`
      })
    } else {
      uni.showModal({
        title: "确定删除订单？",
        success(res) {
          if (res.confirm) {
            taskDeleteApi(id)
          } else if (res.cancel) {
            return
          }
        }
      })
    }
  }

  function onTransaction(item) {
    uni.navigateTo({
      url: `/pages/my/orderPage/orderDetails?id=${item.id}`
    })
  }
  const taskCancelApi = (async (id) => {
    const res = await taskCancel({
      task_id: id
    })
    if (res && res.code == 1) {
      uni.showToast({
        title: "订单取消成功",
        icon: 'none'
      })
      await downCallback()
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })
  const taskDeleteApi = (async (id) => {
    const res = await taskDelete({
      task_id: id
    })
    if (res && res.code == 1) {
      uni.showToast({
        title: "订单删除成功",
        icon: 'none'
      })
      await downCallback()
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })

  const upCallback = (mescroll) => {
    taskList({
      status: currentIndex.value,
      page: mescroll.num
    }).then(res => {
      const curPageData = res.data.data || [] // 当前页数据
      const totalPage = res.data.total
      if (mescroll.num == 1) orderList.value = []; // 第一页需手动制空列表      
      orderList.value = orderList.value.concat(curPageData); //追加新数据
      mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
      mescroll.endSuccess(curPageData.length)
    }).catch(() => {
      mescroll.endErr()
    })
  }
</script>

<style lang="scss" scoped>
  .order-list {
    height: 100%;
    display: flex;
    flex-direction: column;

    .order-tab {
      height: 96rpx;
      width: 100%;
      background-color: #fff;

      ::v-deep .u-tabs__wrapper__nav__line {
        border-radius: 0;
        bottom: 16rpx;
      }

      ::v-deep .u-tabs__wrapper__nav__item {
        padding: 0 24rpx;
        flex: 1;
        z-index: 1;
      }
    }

    .order-content {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: scroll;
      box-sizing: border-box;
      padding: 30rpx;

      .content-nav {
        width: 100%;
        height: 412rpx;
        background-color: #fff;
        border-radius: 16rpx;
        margin-bottom: 24rpx;
        box-sizing: border-box;
        padding: 0 30rpx;

        .nav-head {
          width: 100%;
          height: 88rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 28rpx;
          font-weight: 500;
          border-bottom: 2rpx solid #EBEBEB;

          .head-title {
            color: #333333;

          }

          .head-label-progress {
            color: #A4682F;

          }

          .head-label-obligation {
            color: #F52020;

          }

          .head-label-complete {
            color: #03A142;
          }

          .head-label-cancel {
            color: #999;
          }
        }

        .nav-main {
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          padding: 30rpx 0;

          .main-content {
            display: flex;

            .content-img {
              width: 160rpx;
              height: 160rpx;
              border-radius: 16rpx;
              border: 2rpx solid #EBEBEB;
              box-sizing: border-box;
              padding: 10rpx;
              flex: 0 0 auto;
            }

            .content-info {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              margin-left: 20rpx;

              .info-head {
                display: flex;
                justify-content: space-between;
                font-size: 30rpx;
                font-weight: 400;
                color: #333;

                .head-title {
                  width: 80%;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  line-height: 1.5;
                }

                .head-price {
                  display: flex;
                  font-size: 32rpx;
                  align-items: baseline;
                }
              }

              .info-label {
                display: flex;
                align-items: center;

                .label-img {
                  height: 40rpx;
                  width: 40rpx;
                  border-radius: 50%;
                }

                .label-name {
                  max-width: 186rpx;
                  flex: 1;
                  font-size: 26rpx;
                  font-weight: 400;
                  color: rgba(102, 102, 102, 1);
                  margin-left: 8rpx;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }

                .label-time {
                  font-size: 22rpx;
                  font-weight: 400;
                  color: rgba(153, 153, 153, 1);

                }
              }
            }
          }

          .main-btn {
            display: flex;
            margin-top: 40rpx;
            flex-direction: row-reverse;

            .btn-default {
              width: 176rpx;
              height: 64rpx;
              border-radius: 32rpx;
              background: #FFFFFF;
              border: 2rpx solid #CCCCCC;
              font-size: 28rpx;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 16rpx;
            }

            .btn-primary {
              width: 176rpx;
              height: 64rpx;
              border-radius: 32rpx;
              background: #A4682F;
              font-size: 28rpx;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 16rpx;
              border: 2rpx solid #CCCCCC;
            }
          }
        }
      }
    }
  }
</style>